<template>
  <view class="list-container">
    <view
      class="list-box-wrapper"
      v-for="item in props.contentList"
      :key="item.id"
      @click="() => jump(item)"
    >
      <content-item-inner :item="item" @content-item-change="contentItemChange" />
    </view>
  </view>
</template>

<script lang="ts" setup>
const emits = defineEmits(['content-item-change'])
const props = defineProps<{
  contentList: any[]
}>()
const jump = (item) => {
  uni.navigateTo({
    url: `/pages/details/index?id=${item.id}&articleId=${item.articleId}`,
  })
}
const contentItemChange = (e: any) => {
  emits('content-item-change', e)
}
</script>

<style lang="scss" scoped>
.list-container {
  box-sizing: border-box;
  width: 100%;

  .list-box-wrapper {
    position: relative;
    padding: 20rpx;
    margin: 20rpx 0;
    background: #fff;
    border-radius: 16rpx;
  }
}
</style>
